<template>
    <div class="wh-100 d-flex">
        <!--    左侧区域-->
        <div class="h-100" :class="[isActive ? 'with-80' : 'with-100']" style="background-color: white">
            <div class="w-100 d-flex-align-center" style="height: 50px">
                <Button type="primary">添加敏感词</Button>
                <Button>批量删除</Button>
                <Button>导出敏感词</Button>
                <Button>导入敏感词</Button>
                <Button type="dashed " class="mr-auto">关闭提示</Button>
                <div @click="isActiveMethods" class="d-flex-around-center cursor-pointer mr-12" style="width: 40px; height: 34px; background-color: #009dff; color: white">
                    <div v-if="isActive">></div>
                    <div v-else><</div>
                </div>
            </div>
            <Table class="w-100" style="height: calc(100% - 100px)" ref="selection" :columns="columnsData" :data="dataList">
                <template slot-scope="{ row, index }" slot="option" class="">
                    <div class="wh-100 d-flex">
                        <div class="cursor-pointer" style="color: #0095f5">编辑</div>
                        <div class="cursor-pointer ml-12" style="color: #0095f5">删除</div>
                    </div>
                </template>
            </Table>
            <div class="w-100 d-flex-around-center" style="height: 50px">
                <Page :total="40" size="small" show-elevator show-sizer />
            </div>
        </div>
        <!--    右侧区域-->
        <div v-if="isActive" class="h-100 ml-12" :class="[isActive ? 'with-20' : '']" style="width: 20%; background-color: white">
            <div class="w-100 fs-14 fw-7 pl-12 pt-12" style="height: 50px">编辑区</div>
            <div class="w-100 pl-20 pt-12 pr-20" style="height: calc(100% - 100px)">
                <el-form label-position="top" :rules="formRules" label-width="80px" :model="formData">
                    <el-form-item label="敏感词" prop="sensitiveWords">
                        <el-input v-model="formData.sensitiveWords" type="textarea" :autosize="{ minRows: 5 }" placeholder="批量添加：每组词，用中文逗号分开"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input placeholder="敏感词类型"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="w-100" style="height: 50px">
                <div class="d-flex-around-center h-100 ml-auto mr-12" style="width: 40%">
                    <Button>取消</Button>
                    <Button type="primary">提交</Button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isActive: true,
            columnsData: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '序号',
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '敏感词',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '备注',
                    key: 'age',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    key: 'address',
                    align: 'center'
                },
                {
                    title: '操作',
                    slot: 'option',
                    align: 'center',
                    width: 105
                }
            ],
            dataList: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2016-10-01'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2016-10-02'
                }
            ],
            formData: [],
            formRules: {
                sensitiveWords: [{ required: true, message: '请输入敏感词', trigger: 'blur' }]
            }
        };
    },
    methods: {
        isActiveMethods() {
            this.isActive = !this.isActive;
        }
    }
};
</script>
<style lang="less">
.with-80 {
    width: 80%;
}
.with-20 {
    width: 20%;
}
.with-100 {
    width: 100%;
}
</style>
